<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="regSubmit"></login-form>
          <p class="login-tip">
            <a @click="showWindowBDrawer = true" type="primary">用户注册</a>
          </p>
        </div>
      </Card>
    </div>
    <Drawer title="用户注册" v-model="showWindowBDrawer" width="720" :mask-closable="false" :styles="styles">
      <Form :model="formData" :rules="ruleValidate" ref="formData">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="用户名：" prop="userName" label-position="top">
              <Input v-model="formData.userName" placeholder="请输入用户名"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="密码" prop="password" label-position="top">
              <Input type="password" v-model="formData.password" placeholder="请输入密码"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="确认密码" prop="rePassword" label-position="top">
              <Input type="password" v-model="formData.rePassword" placeholder="请再次输入密码"/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="手机号码" prop="telephone" label-position="top">
              <Input v-model="formData.telephone" placeholder="请输入手机号码"/>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="showWindowBDrawer = false">取消</Button>
        <Button type="primary" @click="regSubmit('formData')">提交</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import LoginForm from '_c/login-form'
  import {mapActions} from 'vuex'

  export default {
    components: {
      LoginForm,
    },
    data() {
      const validatePass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        const patrn = /^(\w){6,20}$/;
        setTimeout(() => {
          if (!patrn.exec(value)) {
            return callback(new Error("密码应该由字母、数字、下划线组成的6-20位字符串"));
          } else {
            callback();
          }
        }, 100);
      };
      const validateRePass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('确认密码不能为空'));
        }
        setTimeout(() => {
          if (value != this.formData.password) {
            return callback(new Error("两次密码不相同"));
          } else {
            callback();
          }
        }, 100);
      };
      const checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号码不能为空'));
        }
        setTimeout(() => {
          if (!(/^1[3456789]\d{9}$/.test(value))) {
            return callback(new Error('手机号码有误，请重填'));
          } else {
            callback();
          }
        }, 100);
      };

      return {
        showWindowBDrawer: false,
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        formData: {
          userName: '',
          password: '',
          rePassword: '',
          telephone: '',
        },
        ruleValidate: {
          userName: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ],
          password: [
            {validator: validatePass, trigger: 'blur'},
          ],
          rePassword: [
            {validator: validateRePass, trigger: 'blur'},
          ],
          telephone: [
            {validator: checkPhone, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      ...mapActions([
        'handleLogin',
        'getUserInfo'
      ]),
      regSubmit(tableName) {
        console.log(this.$refs[tableName]);
        this.$refs[tableName].validate((valid) => {
          if (valid) {
            /*this.$server.exam(paramObj).then(data => {
              console.log(data)
            }
            const aa = server.fetch("https://ceshi-bms.burdoo.com/generateVailCode", "");
            console.log(aa);*/
            this.showWindowBDrawer = false;
            this.$refs[tableName].resetFields();
          }
        })
      }
    }
  }
</script>
